<template>
  <div>
    <h1>父组件</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击更新父组件的信息</button>
   <ComponentA/>
  <ComponentB/>
  </div>
 </template>
<script >
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';
export default{
  components:{
    ComponentA,
    ComponentB,
  },
  data(){
    return {
      message:'这是父组件'
    }
  },
  beforeCreate(){
    console.log('父组件的beforecreate')
  },
  created(){
    console.log('父组件的created')
  },
  beforeMount(){
    console.log('父组件的beforeMount')
  },
  mounted(){
    console.log('父组件的mounted')
  },
  beforeUpdate(){
    console.log('父组件的beforeUpdate')
  },
  update(){
    console.log('父组件的update')
  },
  beforeDestory(){
    console.log('父组件的beforeDestory')
  },
  destoryed(){
    console.log('父组件的destoryed')
  },
  methods:{
    handleClick(){
      this.message='这是父组件的新信息'
    }
  }
}

</script>



<style scoped>

</style>
